<template>
	<view>
		<view class="videos">
			<video :id="'myVideoLesson'" :controls="true" :src='vis' :poster='coverLink' :enable-danmu="false"
				:page-gesture='true' :danmu-btn="false" class="videoset"></video>
		</view>
		<view class="texts">
			<view class="lessonsname">{{lessonname}}</view>
			<view class="texts_time">
				{{data.gmtCreate | timefun}}
			</view>
		</view>
		<view class="contentT_title">
			目录
		</view>
		<scroll-view :scroll-with-animation="true" :scroll-left="scollLeft" :scroll-x="true" :scroll-y="false"
			class="contentT">
			<view class="contentT_listBox">
				<view @click="overload(item.id)" :id="'contentT_listBox_' + item.id" v-for="(item,index) in contentList"
					class="content_list">
					<view class="content_list_text" :class="CalssFun(item.id)">
						{{item.courseName}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="maintextbg">
			<view class="maintextbg_title">
				详情
			</view>
			<view class="maintext">
				{{courseDetails}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mainlessons,
		bootcoursegetCatalogue
	} from '@/api/club'
	export default {
		data() {
			return {
				courseDetails: null,
				courseId: null,
				lessonname: '',
				teacher: '',
				coverLink: null,
				vis: '',
				data: {},
				contentList: [],
				scollLeft: 0
			}
		},
		filters: {
			timefun(text) {
				if (!text) {
					return "";
				}
				var now = new Date(text);
				var yy = now.getFullYear(); // 年
				var mm = now.getMonth() + 1; // 月
				var dd = now.getDate(); // 日
				var hh = now.getHours(); // 时
				var ii = now.getMinutes(); // 分
				var ss = now.getSeconds(); // 秒
				var clock = yy + "-";
				if (mm < 10) clock += "0";
				clock += mm + "-";
				if (dd < 10) clock += "0";
				clock += dd;
				// if (hh < 10) clock += "0";
				// clock += hh + ":";
				// if (ii < 10) clock += "0";
				// clock += ii + ":";
				// if (ss < 10) clock += "0";
				// clock += ss + " ";
				return clock;
			},
		},
		created() {},
		mounted() {},
		onLoad(data) {
			this.id = data.id
			this.courseId = data.id
			this.lessons();
			this.bootcoursegetCatalogue()
		},
		methods: {
			overload(id) {
				this.id = id
				this.courseId = id
				this.lessons();
			},
			bootcoursegetCatalogue() {
				bootcoursegetCatalogue().then(res => {
					this.contentList = res.data
					var _this = this;
					setTimeout(() => {
						this.$nextTick(function() {
							const query = uni.createSelectorQuery().in(_this);
							query.select('#contentT_listBox_' + String(_this.id))
								.boundingClientRect(data => {
									console.log(data)
									uni.getSystemInfo({
										success: function(res) {
											_this.scollLeft = data.left - (res
												.windowWidth *
												0.35)
										}
									});
								})
								.exec();
						})
					}, 100)
				})
			},
			CalssFun(id) {
				if (id == this.id) {
					return 'content_list_text_active'
				}
				// let this_ = this;
				// this.$nextTick(function() {
				// 	this_.$forceUpdate()
				// })
				return ''
			},
			lessons() {
				// let sss = {
				// 	id:this.courseId
				// }
				mainlessons(this.courseId).then(res => {
					if (res.success != 1) {
						uni.showToast({
							icon: 'none',
							title: res.message,
							duration: 3000,
							mask:true
						})
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					} else {
						this.coverLink = res.data.coverLink;
						this.vis = res.data.videoLink;
						this.lessonname = res.data.courseName;
						this.teacher = res.data.lecturer;
						this.courseDetails = res.data.courseDetails
						this.data = res.data
						uni.setNavigationBarTitle({
							title: res.data.courseName
						})

					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff
	}
</style>
<style lang="scss" scoped>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	.contentT_title {
		font-size: 34upx;
		font-weight: bold;
		padding: 0 20upx;
		margin-top: 20upx;
	}

	.contentT {
		margin-top: 20upx;
		.contentT_listBox {
			white-space: nowrap;
			padding: 20upx;

			.content_list {
				width: 250upx;
				display: inline-block;
				margin-right: 20upx;
				padding: 30upx;
				border-radius: 10upx;
				background-color: #fff;
				height: 140upx;
				box-shadow: 0 0 20upx #eee;

				.content_list_text {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 28upx;
					color: #262626;
					white-space: pre-wrap;
					width: 100%;
				}
			}
		}
	}

	.videos {
		width: 100%;
	}

	.videoset {
		width: 100%;
	}

	.texts {
		padding: 20upx;
		border-bottom: 2upx solid #e1e1e1;
		padding-bottom: 70upx;

		.texts_time {
			font-size: 24upx;
			color: #8d8d8d;
			margin-top: 30upx;
		}
	}


	// .lessons {
	// 	width: 25%;
	// 	text-align: right;
	// 	font-weight: 600;
	// }

	.lessonsname {
		// width: 40%;
		// overflow: hidden;
		/*超出部分隐藏*/
		// white-space: nowrap;
		/*不换行*/
		// text-overflow: ellipsis;
		font-size: 36upx;
		font-weight: 700;
	}

	.teachers {
		width: 10%;
		text-align: center;
	}

	.teachersname {
		width: 35%;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		text-align: center;
		font-size: 26upx;
	}

	.maintextbg {
		width: 100%;

		.maintextbg_title {
			font-size: 34upx;
			font-weight: bold;
			padding: 0 20upx;
			margin-top: 20upx;
		}
	}

	.maintext {
		width: 100%;
		font-size: 30upx;
		padding: 20upx;
	}

	.content_list_text_active {
		color: #26ab0f !important;
	}
</style>
